<template>
	<view class="p-3">
		<view class="u-card px-2">
			<u--form labelPosition="left" :model="model" ref="form" labelWidth="150rpx">
				<u-form-item label="开始时间" prop="userInfo.name" borderBottom ref="item" @click="showstartTime = true;">
					<u--input v-model="model.startTime" placeholder="请选择开始时间" disabled border="none"></u--input>
				</u-form-item>
				<u-form-item label="结束时间" prop="userInfo.name" ref="item" @click="showendTime = true;">
					<u--input v-model="model.endTime" placeholder="请选择结束时间" disabled border="none"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="mt-2">
			<view class="color333 font30 font-weight-bold mb-2 pb-0 pt-2">选择日期</view>
			<view class="flex align-center flex-wrap">
				<view class="flex align-center justify-center item mb-2 mr-3" v-for="(item,index) in checkboxList"
					:key="index" :class="item.disabled?'active':''" @click="clickItem(item,index)">{{item.name}}
				</view>
			</view>
		</view>
		<view class="fixed-bottom px-3 mb-5">
			<main-button @click="submit">保存</main-button>
		</view>
		<u-datetime-picker :show="showstartTime" v-model="model.startTime" @confirm="changeTime"
			@cancel="showstartTime = false" mode="time">
		</u-datetime-picker>
		<u-datetime-picker :show="showendTime" v-model="model.endTime" @confirm="changeTime"
			@cancel="showendTime = false" mode="time">
		</u-datetime-picker>
		<u-loading-page :loading="loadingPage" loading-text="添加中..." bg-color="rgba(000, 000, 000, 0.5)"></u-loading-page>
	</view>
</template>

<script>
	import mainButton from '../../../../components/common/main-buttom.vue';
	export default {
		data() {
			return {
				loadingPage:false,
				checkboxList: [{
						name: '周日',
						disabled: false,
						id: 0
					}, {
						name: '周一',
						disabled: false,
						id: 1
					},
					{
						name: '周二',
						disabled: false,
						id: 2
					},
					{
						name: '周三',
						disabled: false,
						id: 3
					},
					{
						name: '周四',
						disabled: false,
						id: 4
					},
					{
						name: '周五',
						disabled: false,
						id: 5
					},
					{
						name: '周六',
						disabled: false,
						id: 6
					}
				],
				model: {},
				showstartTime: false,
				showendTime: false
			}
		},
		components: {
			mainButton
		},
		methods: {
			clickItem(item, index) {
				if (item.disabled) {
					this.checkboxList[index].disabled = false
				} else {
					this.checkboxList[index].disabled = true
				}
			},
			changeTime() {
				this.showstartTime = false;
				this.showendTime = false;
			},
			submit() {
				let _this = this;
				_this.loadingPage=true;
				let arr = []
				_this.checkboxList.forEach((item) => {
					if (item.disabled) {
						arr.push(item.id)
					}
				})

				let opts = {
					url: 'Jz/SaveShmsJz.shtml'
				};
				
				let param = {
					class_code: uni.getStorageSync('classcode'),
					class_mode_id:'',
					xsId:uni.getStorageSync('classUserId'),
					start_time: _this.model.startTime,
					end_time: _this.model.endTime,
					enabled: true,
					week_days: arr.toString()
				};
				_this.$http.httpRequest(opts, param).then(
					res => {
						_this.loadingPage=false;
						console.log(res.data);
						if (res.data.code == '200') {
							uni.showToast({
								title: "添加成功",
								icon: "none"
							})
							uni.navigateBack({
								delta:1
							})
						}else{
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						}
					},
					error => {
						console.log(error);
					}
				)
			}
		}
	}
</script>

<style>
	page {
		background-color: #F6F6F8;
	}
</style>
<style>
	.u-card {
		background-color: #ffffff;
		border-radius: 10rpx;
	}

	.item {
		height: 60rpx;
		width: 120rpx;
		border: 1rpx solid #FFA800;
		border-radius: 8rpx;
	}

	.active {
		background-color: #FFA800;
		color: #FFFFFF;
	}
</style>
